<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	.box {
		overflow: hidden;
		margin-top: 20px;
	}

	p {
		cursor: pointer;
		width: 80px;
		height: 35px;
		border-radius: 5px;
		float: left;
		font: 15px/35px "";
		margin-left: 30px;
		color: #fff;
		text-align: center;
	}

	.btn-info {
		background: #00f;
	}

	.btn-success {
		background: #0f0;
	}

	.btn-warning {
		background: #f90;
	}

	.btn-danger {
		background: #f00;
	}
	</style>
</head>
<body>
	<div class="box">
		<p class="btn-info">信息提醒</p>
		<p class="btn-success">成功提示</p>
		<p class="btn-warning">警告提示</p>
		<p class="btn-danger">失败提示</p>
	</div>
</body>
</html>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="message.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('.btn-info').on('click', function () {
	        $.message({
	            message: '信息提醒',
	            type: 'info'
	        });
	    })
	    $('.btn-success').on('click', function () {
	        $.message({
	            message: '成功提示',
	            duration: 3000,
	            type: 'success'
	        });
	    })
	    $('.btn-warning').on('click', function () {
	        $.message({
	            message: '警告提示',
	            type: 'warning',
	            showClose: true,
	            center: true,
	            onClose: function () {
	                alert('知道了')
	            }
	        });
	    })
	    $('.btn-danger').on('click', function () {
	        $.message({
	            message: '失败提示',
	            showClose: true,
	            type: 'error'
	        });
	    })
		
</script>
